<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔记发布</title>
    <link rel="stylesheet" href="/page/layui/css/layui.css">
    <script src="/page/layui/layui.js"></script>
    <script src="/page/js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="/page/css/iconfont.css">
    <link rel="stylesheet" href="/page/css/note_add.css">
</head>
<body>
<h1 class="page-title">发布笔记</h1>
<form class="layui-form" id="note-form">
    <div class="layui-upload">
        <div>
            <label for="content-area">图片编辑：</label>
            <button type="button" class="layui-btn iconfont" id="test2">&#xe6ea;上传更多</button>
        </div>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;height: 100px">
            <ul id="demo2" class="layui-upload-list"></ul>
        </blockquote>
    </div>

    <div class="layui-upload">
        <label for="content-area">选择封面</label>
        <div id="cover">

        </div>
    </div>
    <label for="title-input">标题：</label>
    <input type="text" id="title-input" name="title" placeholder="填写标题，可能会有更多赞哦~" required>

    <label for="content-area">笔记内容：</label>
    <textarea id="content-area" rows="10" name="content" cols="50"
              placeholder="填写填写更全面的描述信息，让更多的人看到你吧" required></textarea>
    <!--    <button type="button" id="addnote">发布笔记</button>-->
    <button type="submit" id="addnote" class="layui-btn" lay-submit="" lay-filter="addnote">立即提交</button>
</form>
</body>
<script>
    layui.use(['upload', 'layer', 'form'], function () {
        const upload = layui.upload;
        const layer = layui.layer;
        const form = layui.form;
        const token = sessionStorage.getItem("Authorization");
        var uploadimgcount = 0;
        upload.render({
            elem: '#test2'
            , url: 'http://39.98.107.120/fileBatch/syncUploadImage'
            , multiple: true
            , number: 6
            , headers: {'Authorization': token}
            , done: function (data, index) {
                console.log(data)
                if (data.code == 200) {
                    if (uploadimgcount >= 6) {
                        layer.msg('最多只能上传6张图片哦', {icon: 2});
                        return false;
                    } else {
                        var imgHtml = '<li class="imglist"><img src="' + data.data + '" class="layui-upload-img"><i index="' + index + '" class="layui-icon layui-icon-delete del-file"></i></li>';
                        $('#demo2').append(imgHtml);
                        uploadimgcount++;
                    }
                }
                console.log(data.message)
            }
        });
        upload.render({
            elem: '#cover'
            , url: 'http://39.98.107.120/fileBatch/syncUploadImage'
            , multiple: true
            , headers: {'Authorization': token}
            , done: function (data) {
                if (data.code == 200) {
                    let cover = document.getElementById("cover")
                    cover.style.backgroundImage = "url(" + data.data + ")"
                } else {
                    layer.msg(data.message)
                }
            }
        });

        // 删除单个预览图事件绑定
        $('#demo2').on('click', '.del-file', function () {
            $(this).parent().remove(); // 移除预览图和删除图标
            uploadimgcount--;
        });


        form.on('submit(addnote)', function (data) {
            let task = {};
            let contentnote = {};
            let imgli = document.getElementsByClassName("imglist")
            var result = '';
            for (var i = 0; i < imgli.length; i++) {
                if (i !== 0) {
                    result += ';';
                }
                result += imgli[i].firstChild.src;
            }
            let cover = document.getElementById("cover")
            if (cover.style.backgroundImage !== "") {
                // 如果背景图是直接在元素的style属性中设置的
                backgroundUrl = cover.style.backgroundImage;
                // 去除CSS字符串中的 "url()" 部分，并去掉首尾的引号
                backgroundUrl = backgroundUrl.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
            } else {
                // 如果背景图是在CSS文件或内联样式标签中设置的，需要使用window.getComputedStyle
                let computedStyle = window.getComputedStyle(cover, null);
                backgroundUrl = computedStyle.getPropertyValue('background-image');
                // 同样去除CSS字符串中的 "url()" 部分，并去掉首尾的引号
                backgroundUrl = backgroundUrl.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
            }
            if (imgli.length > 0) {
                if (backgroundUrl == "https://copywritings.oss-accelerate.aliyuncs.com/boot/nexus-all/images/2024-03-04/cd35f96c766840838a7d7f761498e93a.png") {
                    backgroundUrl = imgli[0].firstChild.src
                }
            }
            task.coverUrl = backgroundUrl
            task.title = data.field.title
            contentnote.content = data.field.content;
            contentnote.contentIms = result;
            task.noteContentDTO = contentnote;
            save(task)
            return false;
        })

        function save(data) {
            $.ajax({
                url: "http://39.98.107.120/note/addNote",
                type: "post",
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json",
                headers: {'Authorization': token},
                success: function (data) {
                    if (data.code == "200") {
                        console.log(data);
                        layer.msg("发布成功")
                        // 添加页面跳转
                        window.location.href = "/page/html/note/list.html";
                    } else if (res.code == "601") {
                        layer.msg("请先登录")
                        location.href = "./login/toLogin.html"
                    } else {
                        layer.msg(data.message)
                    }
                }
            })
        }
    });
</script>
</html>